<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <style type="text/css">
            /*body,html{width:100%;height:100%;background:#000;padding:0;margin:0;overflow-x:hidden;overflow-y:hidden}*/
            /**{margin:0;border:0;padding:0;text-decoration:none}*/
            #dplayer{
                /*position: absolute;
                left: 9;
                top: 0;
                height: 100%; */
                width: 98%;
                
            }
            
        </style>
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    </head>
    
    <body style="height:600px">
        
        <div id="dplayer" style="height:81%;width:auto;"></div>
        <div style="height: 0%;width:auto;"></div>
        <div style="color: #00000020;">——————————————————————</div>
        <!--<button id="find1" type="button" style="height:35px;width:50px;">查询</button>-->
        <input type="text" name="" id="url_input" value="" style="height:30px;width:98%;"/>
        <!--<button id="find2" type="button" style="height:35px;width:50px;">查询</button>-->
        
        <div style="color: #00000020;">——————————————————————</div>
        
        <button id="pre600" type="button" style="height:35px;width:45px;">-10m</button>
        <button id="pre60" type="button" style="height:35px;width:40px;">-1m</button>
        
        <span style="color: #00000020;">|</span>
        
        <button id="pre_jump" type="button" style="height:35px;width:40px;">-5s</button>
        <button id="next_jump" type="button" style="height:35px;width:40px;">+5s</button>
        <button id="next10" type="button" style="height:35px;width:40px;">+10s</button>
        
        <span style="color: #00000020;">|</span>
        
        <button id="next60" type="button" style="height:35px;width:40px;">+1m</button>
        <button id="next600" type="button" style="height:35px;width:45px;">+10m</button>
        
        <div style="color: #00000020;">——————————————————————</div>
        
        <button id="sub_1s" type="button" style="height:35px;width:40px;">-1s</button>
        <button id="reset_jump_second" type="button" style="height:35px;width:40px;">5s</button>
        <button id="add_1s" type="button" style="height:35px;width:40px;">+1s</button>
        <div style="color: #00000020;">——————————————————————</div>
        
        <button id="sub_5s" type="button" style="height:35px;width:40px;">-5s</button>
        <button id="reset_jump_10second" type="button" style="height:35px;width:40px;">10s</button>
        <button id="add_5s" type="button" style="height:35px;width:40px;">+5s</button>
        
        <script src="https://cdn.jsdelivr.net/npm/cdnbye@latest/dist/hlsjs-p2p-engine.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/hls.js@0.14.13"></script>
        <script src="https://cdn.jsdelivr.net/npm/cbplayer2@latest"></script>
        <script>
            
            $("#url_input").change(function(){
            
                    var dp = new CBPlayer({
                    container: document.getElementById('dplayer'),
                    autoplay: true,
                    // live: true,
                    playState: true,   // 记忆播放
                    lang: 'zh-cn',
                    
                    video: {
                        url: $("#url_input").val(),
                    },
                    pluginOptions: {
                        hls: {
                            debug: false,
                            p2pConfig: {
                                logLevel: false,
                                // live: true,
                                // Other p2pConfig options provided by CDNBye
                            }
                        }
                    },
                });
                var player = document.querySelector(".dplayer-video.dplayer-video-current")
                
                var jump_second = 5
            
                $('#pre_jump').text('-' + jump_second + 's')
                $('#next_jump').text('+' + jump_second + 's')
            
                $('#pre_jump').click(function(){
                    player.currentTime = player.currentTime - jump_second * 1
                })
                $('#next_jump').click(function(){
                    player.currentTime = player.currentTime + jump_second * 1
                })
                $('#next10').click(function(){
                    player.currentTime = player.currentTime + 10
                })
                
                $('#pre60').click(function(){
                    player.currentTime = player.currentTime - 60
                })
                $('#next60').click(function(){
                    player.currentTime = player.currentTime + 60
                })
                
                $('#pre600').click(function(){
                    player.currentTime = player.currentTime - 600
                })
                $('#next600').click(function(){
                    player.currentTime = player.currentTime + 600
                })
                
            
                $('#add_1s').click(function(){
                    jump_second = jump_second * 1 + 1
                    $('#pre_jump').text('-' + jump_second + 's')
                    $('#next_jump').text('+' + jump_second + 's')
                })
                $('#sub_1s').click(function(){
                    
                    jump_second = jump_second * 1 - 1
                    $('#pre_jump').text('-' + jump_second + 's')
                    $('#next_jump').text('+' + jump_second + 's')
                })
                $('#reset_jump_second').click(function(){
                    jump_second = 5 * 1
                    $('#pre_jump').text('-' + jump_second + 's')
                    $('#next_jump').text('+' + jump_second + 's')
                })
                
                $('#add_5s').click(function(){
                    jump_second = jump_second * 1 + 5
                    $('#pre_jump').text('-' + jump_second + 's')
                    $('#next_jump').text('+' + jump_second + 's')
                })
                $('#sub_5s').click(function(){
                    
                    jump_second = jump_second * 1 - 5
                    $('#pre_jump').text('-' + jump_second + 's')
                    $('#next_jump').text('+' + jump_second + 's')
                })
                $('#reset_jump_10second').click(function(){
                    jump_second = 10 * 1
                    $('#pre_jump').text('-' + jump_second + 's')
                    $('#next_jump').text('+' + jump_second + 's')
                })
            });
        </script>
    </body>
</html>
